#include("LayuiHead.html")
<div class="layui-fluid layui-card">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">输入示例</li>
            <li>查看原码</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="card-search SearchTable">
                    <span class="color_green">按钮拖动</span>
                </div>
                <div class="layui-card-body ddd">
                    <div draggable="true" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="DoSearch">layui-btn-warm</div>
                    <div draggable="true" class="layui-btn  layui-btn-sm btn-add" lay-event="DoSearch">btn-add</div>
                    <div draggable="true" class="layui-btn  layui-btn-sm btn-edit" lay-event="DoSearch">btn-edit</div>
                    <div draggable="true" class="layui-btn  layui-btn-sm btn-del" lay-event="DoSearch">btn-del</div>
                    <div draggable="true" class="layui-btn  layui-btn-sm btn-del-more" lay-event="DoSearch">btn-del-more</div>
                    <div draggable="true" class="layui-btn  layui-btn-sm btn-transfer" lay-event="DoSearch">btn-transfer</div>
                </div>
                <div class="card-search SearchTable">
                    <span class="color_green">表单行拖动</span>
                </div>
                <div class="layui-card-body vvv">
                    <div class="layui-row" draggable="true">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">测试ID1</label>

                                <div class="layui-input-block">
                                    <input type="text" readonly name="test_id" placeholder="自动生成11" value="11" class="layui-input input-readonly">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row" draggable="true">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">测试ID2</label>

                                <div class="layui-input-block">
                                    <input type="text" readonly name="test_id" placeholder="自动生成2" value="12" class="layui-input input-readonly">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row" draggable="true">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">测试ID3</label>

                                <div class="layui-input-block">
                                    <input type="text" readonly name="test_id" placeholder="自动生成3" value="13" class="layui-input input-readonly">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                 <pre class="layui-code" lay-lang="HTML" lay-title="对应的HTML结构" encode="true">
                      &lt;div class="layui-card-body ddd"&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="DoSearch"&gt;layui-btn-warm&lt;/div&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm btn-add" lay-event="DoSearch"&gt;btn-add&lt;/div&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm btn-edit" lay-event="DoSearch"&gt;btn-edit&lt;/div&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm btn-del" lay-event="DoSearch"&gt;btn-del&lt;/div&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm btn-del-more" lay-event="DoSearch"&gt;btn-del-more&lt;/div&gt;
                    &lt;div draggable="true" class="layui-btn  layui-btn-sm btn-transfer" lay-event="DoSearch"&gt;btn-transfer&lt;/div&gt;
                &lt;/div&gt;
                </pre>
                <pre class="layui-code" lay-lang="JS" lay-title="对应的JS代码">
        layui.myDragSort.render({
            pelem: '.vvv', elem: '.layui-row', done: function (curr, b, e) {
                console.info(b);
                console.info(e);
            }
        });
        layui.myDragSort.render({
            pelem: '.ddd', elem: '.layui-btn', done: function (curr, b, e) {
                console.info(b);
                console.info(e);
            }
        });
                </pre>
            </div>
        </div>
    </div>
</div>
<div class="layui-card">

</div>
<script>
    var TreeInit = 'DragSort';
    layui.use(['myDragSort'], function () {
        layui.myDragSort.render({
            pelem: '.vvv', elem: '.layui-row', done: function (curr, b, e) {
                console.info(b);
                console.info(e);
            }
        });
        layui.myDragSort.render({
            pelem: '.ddd', elem: '.layui-btn', done: function (curr, b, e) {
                console.info(b);
                console.info(e);
            }
        });

    });
</script>
#include("LayuiBottom.html")